<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册页面</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      input,
      select,
      textarea {
        outline: none;
      }
      input[type='text'],
      input[type='password'] {
        width: 222px;
        padding-left: 10px;
        box-sizing: border-box;
      }

      form {
        width: 425px;
        height: 280px;
        padding: 20px;
        margin: 50px auto;
        border: 1px solid red;
      }
      p {
        margin-bottom: 15px;
      }
      .boy {
        margin-right: 42px;
      }
      .eat,
      .sleep {
        margin-right: 24px;
      }
      textarea {
        width: 222px;
        height: 55px;
        padding-left: 10px;
        resize: none;
        vertical-align: top;
        box-sizing: border-box;
      }
      .btn {
        margin-left: 84px;
      }
      .btn input[type='submit'],
      .btn input[type='reset'] {
        width: 60px;
        height: 25px;
      }
      .btn input[type='submit'] {
        margin-right: 20px;
      }
    </style>
  </head>
  <body>
    <form action="xxx.php" method="GET">
      <p>
        <label for="user">用&nbsp;&nbsp;户&nbsp;&nbsp;名：</label>
        <input type="text" name="username" id="user" placeholder="用户名" />
      </p>
      <p>
        <label for="pw">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
        <input type="password" name="pwd" id="pw" placeholder="密码" />
      </p>
      <p>
        <label for="#">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</label>
        <input type="radio" name="sex" id="boy" value="男" checked />
        <label class="boy" for="boy">男</label>
        <input type="radio" name="sex" id="girl" value="女" />
        <label for="girl">女</label>
      </p>
      <p>
        <label for="#">爱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好：</label>
        <input type="checkbox" name="hobby" id="eat" value="吃饭" checked />
        <label class="eat" for="eat">吃饭</label>
        <input type="checkbox" name="hobby" id="sleep" value="睡觉" />
        <label class="sleep" for="sleep">睡觉</label>
        <input type="checkbox" name="hobby" id="play" value="打豆豆" />
        <label class="play" for="play">打豆豆</label>
      </p>
      <p>
        <label for="#">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：</label>
        <select name="prov" id="prov" onchange="showCity(this)">
          <option>--请选择省份--</option>
        </select>
        <select name="city" id="city" onchange="showCounty(this)">
          <option>--请选择城市--</option>
        </select>
        <select name="county" id="county">
          <option>--请选择区县--</option>
        </select>
      </p>
      <p>
        <label for="me">自我介绍：</label>
        <textarea name="me" id="me"></textarea>
      </p>
      <p class="btn">
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
      </p>
    </form>
  </body>

  <script src="js/province.js"></script>
  <script>
    var current_prov; // 省份的 value 值

    // 显示省份
    function showPro() {
      let len = province.length; // 省份长度
      for (var i = 0; i < len; i++) {
        let proOpt = document.createElement('option');
        proOpt.innerHTML = province[i].name;
        proOpt.value = i;
        prov.appendChild(proOpt);
      }
    }
    showPro();

    // 根据所选的省份来显示城市列表
    function showCity(ele) {
      // 先清空城市列表，然后再添加
      city.options.length = 0;
      city.innerHTML = '<option>--请选择城市--</option>';

      let val = ele.options[ele.selectedIndex].value; // 省份的 value 值
      current_prov = val;

      let cityLen; // 城市长度
      if (province[val]) {
        cityLen = province[val]['city'].length;
      }
      for (var j = 0; j < cityLen; j++) {
        let cityOpt = document.createElement('option');
        cityOpt.innerHTML = province[val]['city'][j].name;
        cityOpt.value = j;
        city.appendChild(cityOpt);
      }
    }

    // 根据所选的城市来显示区县
    function showCounty(ele) {
      // 先清空区县列表，然后再添加
      county.options.length = 0;
      county.innerHTML = '<option>--请选择区县--</option>';

      let val = ele.options[ele.selectedIndex].value;
      let countyLen; // 区县长度
      if (province[current_prov]['city'][val]) {
        countyLen = province[current_prov]['city'][val].county.length;
      }
      for (var n = 0; n < countyLen; n++) {
        let countyOpt = document.createElement('option');
        countyOpt.innerHTML = province[current_prov]['city'][val].county[n];
        countyOpt.value = n;
        county.appendChild(countyOpt);
      }
    }
  </script>
</html>
